<template>
	<view id="informationBar">
	<view class="out">
		<view class="top" @tap="check_detail">
			<view class="head">
				<image :src="arr.schoolUser.headPortrait || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" mode="" class="image"></image>
			</view>
			<view class="head_information">
				<view class="head_name">
					{{arr.schoolUser.nickname || ''}}
				</view>
				<view class="near">
					<view class="grade">
						lv.5
					</view>
					<view class="from">
						来自华东交通大学
					</view>
				</view>
			</view>
			<view class="attention" @tap.stop="">
				关注
			</view>
		</view>
		<view class="content1">
			<view @tap="check_detail">
				<view class="title">
				{{arr.inviTitle}}
				</view>
				<view class="detail">
					<text v-for="(item,index) in arr.topics" :key="index" class="detail_1">#{{item.topicName}}</text>
					<text class="detail_2" :class="{active: display}" user-select="true">{{arr.inviContent}}</text>
				</view>
			</view>
			<view class="photo">
				<!-- <image :src="item" @tap="viewImg(index)" class="image" v-for="(item,index) in arr.picUrlList" :key="index"></image> -->
				<image :src="arr.inviPic" @tap="viewImg(index)" class="image" v-if="arr.inviPic!=''"></image>
			</view>
			<view class="comment" @tap="check_detail" v-if="arr.firstComment!=null">
				<view class="c_content">
					<text class="name">{{arr.firstComment.user.nickname}}:</text>
					<text clas="c_context" user-select="true">{{arr.firstComment.comContent}}</text>
				</view>
				<view class="prize">
					赞·{{arr.firstComment.agreeNum}}
				</view>
			</view>
		</view>
		<view class="bottom" @tap="check_detail">
			<view class="site">
				{{arr.build.buildName}}
			</view>
			<view class="time">
				{{date}}
			</view>
			<view class="middle">
				
			</view>
			<view class="number">
				点赞·{{arr.agreeNum}}
			</view>
			<view class="talk">
				评论·{{arr.commentNum}}
			</view>
		</view>
		<view class="last" v-if="opIndex">
			<view class="edit">
				查看
			</view>
			<view class="delete" @tap="delete_bill">
				删除
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name:'InformationBar',
		props:{
			arr: {
				type: Object,
				default() {
					return {}
				}
			},
			opIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			display: {
				type: Boolean,
				default() {
					return true
				}
			}
		},
		created() {
			this.getToken()
		},
		computed: {
			date() {
				var nowDate = +new Date();
				var noteDate = +new Date(this.arr.updateTime);
				var timeDiff = nowDate - noteDate;
				var min = 60 * 1000;
				var hour = min * 60;
				var day = hour * 24;
				var week = day * 7;
				var month = week*4;
				var year = month*12;
				var exceedDay = Math.floor(timeDiff/day);
				var exceedHour = Math.floor(timeDiff/hour);
				var exceedMin = Math.floor(timeDiff/min);
				var exceedyear = Math.floor(timeDiff/year);
				var exceedmonth = Math.floor(timeDiff/month);
				var strs = new Array()
				strs = this.arr.updateTime.split(/[- :]/)
				var year = parseInt(strs[0])
				var month = parseInt(strs[1])
				month = month >= 10 ? month : strs[1].substr(1,1)
				var day = parseInt(strs[2])
				day = day >= 10 ? day : strs[2].substr(1,1)
				var hour = parseInt(strs[3])
				hour = hour >= 10 ? hour : strs[3].substr(1,1)
				var minute = strs[4]
				if(exceedyear<100&&exceedyear>0) {
				  return year + '年' + month + '月' + day + '日';
				} else {
				  if(exceedmonth<12&&exceedmonth>0) {
				    return month + '月' + day + '日';
				  } else {
						if(exceedDay < 30 && exceedDay > 0){
							return month + '月' + day + '日';
					  } else{
					    if(exceedDay < 7 && exceedDay > 0) {
					      return exceedDay + '天前';
					    } else {
					      if(exceedHour < 24 && exceedHour > 0) {
					        return exceedHour + '小时前';
					      } else {
					        if(exceedMin==0) {
					          return '刚刚';
					        } else {
					          return exceedMin + '分钟前';
					        }                  
					      }
							}
				    }
				  }
				}
			}
		},
		data() {
			return {
				token: '',
				invild:0,
				time: ''
			}
		},
		methods: {
			check_detail() {
				uni.navigateTo({
					url: "../../pages/home/HomeItem/Detail?inviId=" + this.arr.inviId
				})
			},
			viewImg(index) {
				uni.previewImage({
					current: index,
					urls: this.arr.picUrlList,
					indicator: "number",
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
								console.log(err.errMsg);
						}
					}
				})
			},
			getToken() {
				uni.getStorage({
					key: "login",
					success:(e) => {
						this.token = e.data.token
						// console.log(this.token)
					}
				})
			},
			async getDeleteData() {
				const res = await this.$myRequest({
					url:'/invitation/deleteInvite/' + this.arr.inviId,
					token:this.token
				})
				// console.log(this.arr.inviId)
				console.log(res)
			},
			delete_bill() {
				uni.showModal({
					title:"提示",
					content:"你是否要删除此帖子？",
					success:(e)=>{
						if(e.confirm) {
							this.getDeleteData()
							this.$emit('cancel')
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.out{
		width: 93%;
		background-color: #CFE4FF;
		margin: 0 auto 20.27rpx;
		border-radius: 27.27rpx;
		.top{
			position: relative;
			width: 100%;
			background: #CFE4FF;
			margin: 1rpx auto;
			border-radius: 27.27rpx;
			height: 119.63rpx;
			display: flex;
			.head{
				width: 80.9rpx;
				height: 80.9rpx;
				background-color: #FFFFFF;
				border-radius: 50%;
				text-align: center;
				font-size: 26rpx;
				line-height: 80.9rpx;
				margin: 30.36rpx 8rpx 30.36rpx 21.81rpx;
				.image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			
		.head_information{
			 // width: 200rpx;
			height: 90.9rpx;
			.head_name{
				height: 26rpx;
				 padding-top: 35rpx;
				font-size: 26rpx;
				font-weight: 800;
			}
			.near{
				display: flex;
				float: left;
				padding-top:14rpx;
				.grade{
					padding-right: 4rpx;
					font-size: 22rpx;
					height: 22rpx;
				}
				.from{
					font-size: 22rpx;
					height: 22rpx;
					margin-left: 5rpx;
				}
			}
	}
	.attention{
		position: absolute;
		background-color: #62A7FF;
		width: 89rpx;
		height: 55rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 55rpx;
		font-size: 22rpx;
		border-radius: 30rpx;
		right: 15rpx;
		bottom: 10rpx;
	}
	}
	.content1{
		.title{
			margin-left: 29.09rpx;
			font-size: 32rpx;
			font-weight: 800;
		}
		.detail{
			margin: 0 21.81rpx 9.09rpx 30rpx;
			.detail_1{
				color: #63B8FF;
				font-size: 25.45rpx;
				padding-right: 18.18rpx;
				margin-bottom: 5.45rpx;
			}
			.detail_2{
				font-size: 25.45rpx;
				user-select: contain;
				display: -webkit-box;
			}
			.active {
				overflow: hidden;
				text-overflow: ellipsis; /*以省略号的形式省略内容*/
				-webkit-line-clamp: 3;  
				-webkit-box-orient: vertical;
			}
		}
		.photo{
			 display: flex;
			 width: 93%;
			 margin: 0 auto;
			.image{
				width: 30%;
				height: 201.81rpx;
				margin: 0 20rpx 20rpx 0;
				border-radius: 30rpx;
				background-color: #C2C2C2;
			}
		}
		.comment{
			padding: 10rpx 20rpx;
			width: 90%;
			// height: 80rpx;
			background-color: #FCFCFC;
			border-radius: 30rpx;
			margin: 0 auto;
			font-size: 25.45rpx;
			position: relative;
			margin: 9.09rpx 18.18rpx;
			.name{
				color: #63B8FF;
				line-height: 30rpx;
			}
			.c_context{
				font-size: 25.45rpx;
				line-height: 26rpx;
				// overflow: hidden;
				// text-overflow: ellipsis; /*以省略号的形式省略内容*/
				// display: -webkit-box;    /*将对象作为弹性伸缩盒子模型显示*/
				// -webkit-line-clamp: 2;  
				// -webkit-box-orient: vertical;
			}
			.prize{
				display: inline-block;
				position: absolute;
				width: 100rpx;
				height: 38rpx;
				line-height: 38rpx;
				font-size: 21.81rpx;
				border-radius: 30rpx 0;
				color: #fff;
				background-color: #62A7FF;
				text-align: center;
				right: 0;
				bottom: 0;
			}
		}
	}
	.bottom{
		width: 93%;
		height: 75rpx;
		display: flex;
		margin: 0 auto;
		.site{
			flex: 1.5;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 30rpx;
			background-color: #fff;
			margin-top: 15rpx;
			font-size: 22rpx;
		}
		.time{
			flex: 1;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 30rpx;
			background-color: #fff;
			margin-top: 15rpx;
			margin-left: 15rpx;
			font-size: 22rpx;
			padding: 0 10rpx;
		}
		.middle{
			flex: 1;
		}
		.number{
			text-align: center;
			flex: 1;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 30rpx;
			background-color: #fff;
			margin-top: 15rpx;
			
			font-size: 22rpx;
			padding: 0 10rpx;
		}
		.talk{
			flex: 1;
			text-align: center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 30rpx;
			background-color: #fff;
			font-size: 22rpx;
			margin-top: 15rpx;
			margin-left: 15rpx;
		}
	}
	.last{
		height: 80rpx;
		display: flex;
		margin: 15rpx;
		.edit{
			flex: 1;
			background-color: #FCFCFC;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 30rpx;
		}
		.delete{
			flex: 1;
			background-color: #FCFCFC;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			text-align: center;
			margin-left: 15rpx;
			border-radius: 30rpx;
		}
	}
  }	
	
</style>
